<template>
	<div class="main">
		<topBar></topBar>
		<div class="content">
			<sideBar></sideBar>
			<div v-bind:class="{'left_conten': $store.state.isCollapse, 'left_conten1': !$store.state.isCollapse}">
				<div class="way_conten"><router-view/></div>
				<footBar></footBar>
			</div>
		</div>
	</div>
</template>

<script>
	import store from '@/vuex/store'
	import topBar from './topBar'
	import sideBar from './sideBar'
	import footBar from './footBar'
	export default{
		name:'homepage',
		components:{
			topBar,sideBar,footBar
		},
		store
	}
</script>

<style>
.left_conten{
	margin-left: 200px;
	padding-top: 60px;
	transition: all 0.2s ease;
}
.left_conten1{
	margin-left: 70px;
	padding-top: 60px;
	transition: all 0.2s ease;
}
.way_conten{
	padding-bottom: 60px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
}
</style>